body {
    font-family: iconfont;
}

.site-head {
    /* height: 200px; */
}


.site-head .topbar{
    background-color: #2A2A2A;
    height: 32px
}

.site-head .topbar .center-wrap{
    color: #2A2A2A; 
}

.site-head .topbar .center-wrap .shortcut-links>ul>li{
    float: left;
    margin-right:25px;
}

.site-head .topbar .center-wrap .shortcut-links>ul>li>a{
    color: #fff;
    text-decoration: none;
    line-height: 32px;
    font-size: 12px;
}

.site-head .topbar .center-wrap .shortcut-links>ul>.have-menu{
    padding-right: 10px;
    position: relative;
}

.site-head .topbar .center-wrap .shortcut-links>ul>.have-menu>.menu {
    padding: 10px;
    width: 100px;
    background-color: white;
    position: absolute;
    top:30px;
    left: 0;
    display: none;
    box-shadow: 0 4px 8px 0 ;
    z-index: 9999;
}

.site-head .topbar .center-wrap .shortcut-links>ul>.have-menu>.sc-menu{
    width: 60px;
}

.site-head .topbar .center-wrap .shortcut-links>ul>.have-menu>.jdms-menu{
    width: 50px;
}

.site-head .topbar .center-wrap .shortcut-links>ul>.have-menu:hover .menu {
    display:block;
}



.site-head .topbar .center-wrap .shortcut-links>ul>.have-menu .menu .menu-list li a {
    font-size: 12px;
    color: #1C1F21;
    line-height: 23px;
    text-decoration: none;
}

.site-head .topbar .center-wrap .shortcut-links>ul>.have-menu .arrow{
    width: 10px;
    height: 10px;
    position: absolute;
    top:40%;
    right: -5px;
    /* margin-top: -5px; */
}

.site-head .topbar .center-wrap .shortcut-links>ul>li:hover .arrow{
    transform: rotate(180deg);
}

.site-head .topbar .center-wrap .login-icon{
    float:right;
}

.site-head .topbar .center-wrap .login-icon span{
    color: #fff;
    line-height: 32px;
    margin-left: 10px;
}

.site-head .topbar .center-wrap .login-icon .text{
    font-size: 12px;
}


.site-head .main-nav {
    height: 40px;
    background-color:  #20BD9A;
}

.site-head .main-nav .center-wrap .main>ul>li{
    float: left;
    margin-right: 20px;
    line-height: 40px;
}

.site-head .main-nav .center-wrap .main>ul>.have-menu{
    padding-right: 15px;
    position: relative;
}

.site-head .main-nav .center-wrap .main>ul>.have-menu::after{
    content: "";
    border: 5px solid transparent;
    border-top: 5px solid #fff ;
    border-bottom: none;
    position: absolute;
    top:50%;
    right:-1px;
}

.site-head .main-nav .center-wrap .main>ul>.have-menu:hover::after{
    transform: rotate(180deg);
}



.site-head .main-nav .center-wrap .main>ul>li>a{
    color: #fff;
    text-decoration: none;
}

.site-head .main-nav .center-wrap .main>ul>.have-menu .menu{
    position: absolute;
    background-color: white;
    box-shadow: 0 4px 8px 0;
    padding: 5px;
    display: none;
    z-index: 9999;
}

.site-head .main-nav .center-wrap .main>ul>.have-menu:hover .menu{
    display: block;
}

.site-head .main-nav .center-wrap .main>ul>.have-menu .jj-menu{
    width: 160px;
}

.site-head .main-nav .center-wrap .main>ul>.have-menu .gt-menu{
    width: 100px;
}

.site-head .main-nav .center-wrap .main>ul>.have-menu .dd-menu{
    width: 160px;
}

.site-head .main-nav .center-wrap .main>ul>.have-menu .sd-menu{
    width: 110px;
}





.site-head .main-nav .center-wrap .main>ul>.have-menu .menu h4{
    font-weight: bold;
    font-size: 14px;
    color: #1C1F21;
    height: 30px;
    line-height: 30px;
}

.site-head .main-nav .center-wrap .main>ul>.have-menu .menu .menu-list>li {
    /* width: 50px; */
    float: left;
    line-height: 20px;
    margin-right: 5px;
}

.site-head .main-nav .center-wrap .main>ul>.have-menu .menu .menu-list>li>a{
    font-size: 12px;
    color: #1C1F21;
    text-decoration: none;
}





.site-head .header-content{
    height: 36px;
    padding: 21px;
}

.site-head .header-content .center-wrap .title{
    float: left;
    width: 120px;
    font-size: 24px;
    color: #20BD9A;
    margin-right: 20px;
}

.site-head .header-content .center-wrap .search-box{
    float: left;
    width: 417px;
    height: 30px;
    line-height: 30px;
}

.site-head .header-content .center-wrap .search-box>input{
    height: 28px;
    width: 373px;
    outline: none;
    padding-left: 10px;
    border: 1px solid #20BD9A;
    border-right: none;
}

.site-head .header-content .center-wrap .search-box .search-btn{
    float: right;
    width: 32px;
    height: 30px;
    background-color:  #20BD9A;
    text-decoration: none;
}

.site-head .header-content .center-wrap .search-box .search-btn>.iconfont{
    display: block;
    /* background-color: beige; */
    text-align: center;
    line-height: 32px;
    color: #fff;
}

.banner {
    position: relative;
}

.banner img {
    width: 100%;
    /* 最小的宽度，防止用户缩小浏览器导致图片变小了 */
    min-width: 1152px;
    /* 底部白边的处理,因为图片可能和盒子的底部产生了一些缝隙 */
    vertical-align: middle;
}

.banner .center-wrap {
    position: absolute;
    width: 1152px;
    left:50%;
    margin-left:-576px;
    top:0;
    /* 这里要写高度，不然就没有高了 */
    height: 100%;
}

.banner .center-wrap .leftbtn {
    color: #fff;
    font-size: 32px;
    text-decoration: none;
    width:28px ;
    height: 44px;
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    left: -38px;
    top:50%;
    margin-top:-22px;

}

.banner .center-wrap .leftbtn:hover {
    /* 透明度 */
    opacity: 0.8;
}

.banner .center-wrap .rightbtn {
    color: #fff;
    font-size: 32px;
    text-decoration: none;
    width:28px ;
    height: 44px;
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    top:50%;
    margin-top:-22px;
    right:-38px;
}

.banner .center-wrap .rightbtn:hover {
    /* 透明度 */
    opacity: 0.8;
}

.banner .center-wrap .banner-nav{
    width: 296px;
    /* 这里要写高度，不然就没有高了 */
    height: 100%;
    background-color: rgba(0,0,0,0.45);
}



.banner .center-wrap .banner-nav .menu-list{
    height: 100%;
}

.banner .center-wrap .banner-nav .menu-list>li{
    /* padding: 10px; */
    height: 16.66%;
    box-sizing: border-box;
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.3);
}

.banner .center-wrap .banner-nav .menu-list>li:hover{
    background-color: rgba(0,0,0,0.3);
}



.banner .center-wrap .banner-nav .menu-list>li>dl {
    height: 48px;
    position: absolute;
    top:50%;
    margin-top:-24px;
    margin-left: 36px;
}

.banner .center-wrap .banner-nav .menu-list>li::before {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    /* background-color: #20BD9A; */
    top:50%;
    margin-top: -12px;
    left: 8px;
}

.banner .center-wrap .banner-nav .menu-list>.hot::before{
    background-image: url(../images/left_icon_01.png);
}

.banner .center-wrap .banner-nav .menu-list>.ch::before{
    background-image: url(../images/left_icon_02.png);
}

.banner .center-wrap .banner-nav .menu-list>.jp::before{
    background-image: url(../images/left_icon_03.png);
}

.banner .center-wrap .banner-nav .menu-list>.dn::before{
    background-image: url(../images/left_icon_04.png);
}

.banner .center-wrap .banner-nav .menu-list>.eu::before{
    background-image: url(../images/left_icon_05.png);
}

.banner .center-wrap .banner-nav .menu-list>.zd::before{
    background-image: url(../images/left_icon_06.png);
}


.banner .center-wrap .banner-nav .menu-list>li::after {
    content: ">";
    font-size: 24px;
    color:#fff;
    position: absolute;
    width: 24px;
    height: 24px;

    top:50%;
    margin-top: -12px;
    right: 8px;
}



.banner .center-wrap .banner-nav .menu-list>li>dl>dt{
    font-size: 18px;
    color: #FFFFFF;
}

.banner .center-wrap .banner-nav .menu-list>li>dl>dd{
    font-size: 14px;
    color: #FFFFFF;
}

.banner .center-wrap .banner-nav .menus-list .menu{
    left:296px;
    top:0;
    position: absolute;
    background-color: rgba(0,0,0,0.55);
    width: 356px;
    height: 100%;
    box-sizing: border-box;
    color: #fff;
    font-size: 14px;
    padding: 15px;
    display: none;
}

.banner .center-wrap .banner-nav .menus-list .current {
    display: block;
}



.banner .center-wrap .banner-nav .menus-list>.menu>li>dl{
    margin-bottom: 15px;
}

.banner .center-wrap .banner-nav .menus-list>.menu>li>dl>dt{
    font-size: 18px;
    /* line-height: 28px; */
    margin-bottom: 6px;
}

.banner .center-wrap .banner-nav .menus-list>.menu>li>dl>dd{
    line-height: 25px;
}

/* 热门图片 */
.hot-ads {
    margin: 30px 0;
    overflow: hidden;
}

.hot-ads .center-wrap>ul>li {
    float: left;
    width: 264px;
    height: 110px;
    /* background-color: firebrick; */
    margin-right: 32px;
}

.hot-ads .center-wrap>ul>li:last-child{
    margin-right: 0;
}


/* 新鲜甩尾 */
.xxsw {
    background-color: #F7F7F7;;
    height: 700px;
}

.xxsw .center-wrap .top-titles {
    overflow: hidden;
    height: 100px;

}

.xxsw .center-wrap .top-titles h2{
    float: left;
    font-size: 36px;
    font-weight: bold;
    color: #1C1F21;
    line-height: 100px;
    margin-right: 15px;
}

.xxsw .center-wrap .top-titles span{
    float: left;
    font-size: 12px;
    color: #1C1F21;
    line-height: 100px;
    position: relative;
    top:10px;
}

.xxsw .center-wrap .content .content-box{
    float: left;
    width: 264px;
    height: 270px;
    margin-right: 32px;
    margin-bottom: 30px;
}

.xxsw .center-wrap .content .content-box:hover{
    box-shadow: 0 4px 8px 0;
}

.xxsw .center-wrap .content .content-box:nth-child(4n){
    margin-right: 0;
}

.xxsw .center-wrap .content .content-box .pic-box{
    height: 184px;
}

.xxsw .center-wrap .content .content-box .wordbox{
    font-size: 14px;
    color: #1C1F21;
    width: 244px;
    height: 38px;
    background-color: #fff;
    padding: 26px 10px;
}

/* 一些公共类 */
.content-part h2{
    font-size: 36px;
    color: #000000;
    font-weight: bold;
    padding: 30px 0px;
    float: left;
}

.content-part em {
    font-size: 12px;
    color: #000000;
    float: left;
    position: absolute;
    top: 60px;
    left: 200px;
}

.content-part .tag{
    font-size: 14px;
    color: #FFFFFF;
    width: 74px;
    height: 40px;
    position: absolute;
    top:144px;
    left: 0px;
    text-align: center;
    line-height: 40px;
    background-color: rgba(0,0,0,0.3);
}


/* 机酒自由行 */
.jjzyx {
    height: 700px;
    background-color: #FFFFFF;
}

.jjzyx .center-wrap .hd{
    width: 1152px;
    height: 100px;
    overflow: hidden;
    position: relative;
}

.jjzyx .center-wrap .hd>ul{
    float: right;
    padding-top: 50px;
}

.jjzyx .center-wrap .hd>ul>li {
    float:left;
    font-size: 14px;
    color: rgba(0,0,0,0.85);
    margin-right: 16px;
}

.jjzyx .center-wrap .hd>ul>.cur{
    color: #20BD9A;;
    border-bottom: 3px solid #20BD9A;;
    padding-bottom: 3px;
}

.jjzyx .center-wrap .hd>ul>li:last-child{
    margin-right: 0;
}

.jjzyx .center-wrap .bd .main-grid{
    float: left;
    background-color: #1C1F21;
    width: 560px;
    height: 270px;
    margin-right: 32px;
    position: relative;
}

.jjzyx .center-wrap .bd .main-grid .content{
    position: absolute;
    background-color: rgba(0,0,0,0.3);
    bottom: 0px;
    left: 0px;
    color: #FFFFFF;
    font-size: 14px;
    padding: 30px 26px;
    height: 40px;
    width: 508px;
    line-height: 25px;
}

.jjzyx .center-wrap .bd .grid{
    position: relative;
    float: left;
    width: 264px;
    height: 270px;
    margin-right: 32px;
    margin-bottom: 30px;
}

.jjzyx .center-wrap .bd .grid:hover{
    box-shadow: 0 6px 14px 0 rgba(0,0,0,0.20)
}

.jjzyx .center-wrap .bd .grid:nth-child(3){
    margin-right: 0;
}

.jjzyx .center-wrap .bd .last-grid{
    float: left;
    height: 270px;
    width: 264px;
    height: 270px;
    background-image: linear-gradient(180deg, #34E3BC 0%, #15AF7A 98%);
    margin-right: 0;
}

.jjzyx .center-wrap .bd .last-grid:hover{
    box-shadow: 0 6px 14px 0 rgba(0,0,0,0.20)
}

.jjzyx .center-wrap .bd .last-grid>.content {
    padding: 36px 26px;
    text-align: center;
    color: #F7F7F7;
    font-size: 14px;
    line-height: 20px;
}

.jjzyx .center-wrap .bd .last-grid>.icon{
    width: 48px;
    height: 48px;
    text-align: center;
    border: 3px solid white;
    color: white;
    line-height: 48px;
    font-size: 38px;
    border-radius: 99%;
    margin-left: 40%;
}

.jjzyx .center-wrap .bd .last-grid>ul{
    padding: 20px 24px;
}

.jjzyx .center-wrap .bd .last-grid>ul>li{
    padding: 10px 10px;
    float: left;
    font-size: 14px;
    color: #FFFFFF;
    border-right: 1px solid white;
    height: 5px;
    line-height: 5px;

}


.jjzyx .center-wrap .bd .grid .pic-box {
    height: 184px;
}

.jjzyx .center-wrap .bd .grid .wordbox {
    background-color: #FFFFFF;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20);
    padding: 20px 12px;
    height: 44px;
    font-size: 14px;
    color: #1C1F21;
}

/* 当地玩乐 */
.ddwl {
    height: 560px;
    background-color:  #F7F7F7;
}

.ddwl .center-wrap .hd{
    overflow: hidden;
    position: relative;
}

.ddwl .center-wrap .hd>ul{
    float: right;
    padding-top: 50px;
}

.ddwl .center-wrap .hd>ul>li {
    float:left;
    font-size: 14px;
    color: rgba(0,0,0,0.85);
    margin-right: 16px;
}

.ddwl .center-wrap .hd>ul>.cur{
    color: #20BD9A;;
    border-bottom: 3px solid #20BD9A;;
    padding-bottom: 3px;
}

.ddwl .center-wrap .hd>ul>li:last-child{
    margin-right: 0;
}

.ddwl .center-wrap .bd .main-grid{
    float: left;
    width: 364px;
    height: 270px;
    position: relative;
    margin-bottom: 30px;
    margin-right: 30px;
}

.ddwl .center-wrap .bd .main-grid .content{
    font-size: 14px;
    color: #FFFFFF;
    background-color: rgba(0,0,0,0.20);
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 10px 20px 30px 20px;
    width: 364px;
    height: 90px;
    box-sizing: border-box;
    
}

.ddwl .center-wrap .bd .main-grid .content .bottom{
    margin-top: 10px;
}

.ddwl .center-wrap .bd .main-grid .content .bottom p:nth-child(1){
    float: left;
}

.ddwl .center-wrap .bd .main-grid .content .bottom p:nth-child(2){
    float: right;
}

.ddwl .center-wrap .bd .main-grid .content .bottom p>strong{
    color: #36DFBA;;
}

.ddwl .center-wrap .bd .grid {
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.0);
    float: left;
    width: 364px;
    height: 120px;
    margin-right: 30px;
    margin-bottom: 30px;
    /* background-color: #36DFBA; */
}

.ddwl .center-wrap .bd .grid:hover {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.40);
}

.ddwl .center-wrap .bd .grid .pic-box{
    float: left;
    width: 120px;
    height: 120px;
}

.ddwl .center-wrap .bd .grid .wordbox{
    
    float:right;
    width: 244px;
    height: 120px;
    background-color: #FFFFFF;
    font-size: 14px;
    color: #000000;
    box-sizing: border-box;
    padding: 27px 18px;

}

.ddwl .center-wrap .bd .grid:nth-child(3){
    margin-right: 0px;
}

.ddwl .center-wrap .bd .last-grid {
    float: right;
    width: 364px;
    height: 270px;
    /* margin-right: 10px; */
    background-image: linear-gradient(180deg, #FF6374 1%, #FF7368 98%);
    margin-bottom: 30px;
}


.ddwl .center-wrap .bd .last-grid>.content {
    padding: 36px 26px;
    text-align: center;
    color: #F7F7F7;
    font-size: 14px;
    line-height: 20px;
}

.ddwl .center-wrap .bd .last-grid>.icon{
    width: 48px;
    height: 48px;
    text-align: center;
    border: 3px solid white;
    color: white;
    line-height: 48px;
    font-size: 38px;
    border-radius: 99%;
    margin-left: 42%;
}

.ddwl .center-wrap .bd .last-grid>ul{
    padding: 40px 10px;
}

.ddwl .center-wrap .bd .last-grid>ul>li{
    padding: 10px 10px;
    float: left;
    font-size: 14px;
    color: #FFFFFF;
    border-right: 1px solid white;
    height: 5px;
    line-height: 5px;
}

/* 特色当地体验 */
.tsdd {
    height:456px;
    background-color: #F7F7F7;
}

.tedd h2 {
    float: none;
    width: 1152px;
    text-align: center;
}

.tedd .center-wrap .bd .grid{
    float: left;
    width: 264px;
    height: 290px;
    margin-right: 32px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
}

.tedd .center-wrap .bd .grid:hover {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.38);
}

.tedd .center-wrap .bd .grid:nth-child(4){
    margin-right: 0px;
}

.tedd .center-wrap .bd .grid .pic-box {
    width: 264px;
    height: 184px;
}

.tedd .center-wrap .bd .grid .wordbox {
    width: 264px;
    height: 106px;
    position: relative;
}

.tedd .center-wrap .bd .grid .wordbox .top{
    padding: 10px 14px;
    font-size: 16px;
    color: #000000;
}

.tedd .center-wrap .bd .grid .wordbox .bottom{
    font-size: 12px;
    color: #000000;
    position: absolute;
    bottom: 20px;
    left:14px
}
.tedd .center-wrap .bd .grid .wordbox .bottom::before{
    content:"★4.8";
    color: #FA6400;
}


